<template>
  <div>
    <transition name="el-fade-in">
      <div class="mask" v-show="$store.state.show_login" @click="$store.state.show_login = false">
        <div @click.stop>
          <div class="left">
            <img :src="$store.state.company_logo" alt />
            <span>欢迎来到</span>
            <p>Master Horizons Class</p>
            <p class="btn" @click="show_register = false" v-if="show_register">登录</p>
            <p class="btn" @click="show_register = true" v-else>注册</p>
            <p
              class="btn"
              @click="$store.state.show_login = false,$store.state.show_set = true"
            >找回密码</p>
          </div>
          <!-- 登录 -->
          <div class="right" v-show="!show_register">
            <span>账户登录</span>
            <p>Welcome Back</p>
            <input
              v-model="form.account"
              prefix-icon="el-icon-mobile-phone"
              placeholder="账号"
              maxlength="11"
            />
            <input
              v-model="form.password"
              show-password
              prefix-icon="el-icon-warning"
              placeholder="密码"
            />
            <!-- <p>忘记密码了吗？</p>
            @click="$store.state.show_set = true"-->
            <p class="btn" @click="login">登录</p>
          </div>
          <!-- 注册 -->
          <div class="right" v-show="show_register">
            <span>欢迎注册</span>
            <p>Welcome to Register</p>
            <input
              v-model="form.account"
              prefix-icon="el-icon-mobile-phone"
              placeholder="账号"
              maxlength="11"
            />
            <div>
              <input
                v-model="form.code"
                maxlength="4"
                placeholder="验证码"
                prefix-icon="el-icon-message"
              />
              <span @click="sendCode(1)">发送</span>
            </div>
            <input
              v-model="form.password"
              show-password
              prefix-icon="el-icon-warning"
              placeholder="密码"
            />
            <input
              v-model="form.confirm_password"
              show-password
              prefix-icon="el-icon-warning"
              placeholder="确认密码"
            />
            <p class="btn" @click="register">注册</p>
          </div>
        </div>
      </div>
    </transition>
    <el-dialog
      title="重置密码"
      append-to-body
      center
      :visible.sync="$store.state.show_set"
      @close="$store.state.show_set = false"
      width="3.8rem"
    >
      <div class="container">
        <input placeholder="电话号码" v-model="form.account" maxlength="11" />
        <input placeholder="新密码" v-model="form.password" show-password />
        <input placeholder="确认密码" v-model="form.confirm_password" show-password />
        <div>
          <input placeholder="验证码" v-model="form.code" maxlength="6" />
          <span @click="sendCode(2)">发送</span>
        </div>
        <el-button type="primary" @click="changePwd">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show_register: false,
      form: {
        account: "",
        code: "",
        password: "",
        confirm_password: ""
      }
    };
  },
  methods: {
    changePwd() {
      let _this = this;
      _this.$axios
        .post("forget-password", {
          account: _this.form.account,
          password: _this.form.password,
          passwordAgain: _this.form.confirm_password,
          code: _this.form.code
        })
        .then(res => {
          if (res) {
            _this.$notify({
              title: "成功",
              message: "密码修改成功",
              type: "success"
            });
            _this.$store.state.show_set = false;
          }
        });
    },
    sendCode(type) {
      let _this = this;
      _this.$axios
        .post("send", {
          type: type,
          mobile: _this.form.account
        })
        .then(res => {
          if (res) {
            _this.$notify({
              title: "成功",
              message: "短信验证码发送成功",
              type: "success"
            });
          }
        });
    },
    login() {
      let _this = this;
      _this.$axios
        .post("login", {
          account: _this.form.account,
          password: _this.form.password
        })
        .then(res => {
          if (res.access_token) {
            console.log(666666666666666666);
            localStorage.setItem("user_token", res.access_token);
            localStorage.setItem("user_name", res.username);
            localStorage.setItem(
              "user_head",
              res.face || require("@/assets/head.png")
            );
            // _this.$router.go(0);
            location.reload();
          }
        });
    },
    register() {
      let _this = this;
      if (_this.form.password !== _this.form.confirm_password) {
        _this.$notify({
          title: "错误",
          message: "两次输入的密码不一致",
          type: "error"
        });
      } else {
        _this.$axios
          .post("register", {
            account: _this.form.account,
            password: _this.form.password,
            code: _this.form.code
          })
          .then(res => {
            if (res.access_token) {
              localStorage.setItem("user_token", res.access_token);
              localStorage.setItem(
                "user_head",
                res.face || require("@/assets/head.png")
              );
              location.reload();
            }
          });
      }
    },
    changePage(e) {
      this.$store.state.show_login = false;
      this.$store.state.show_set = false;
      this.$router.push({
        path: e
      });
    }
  }
};
</script>

<style lang="less" scoped>
.mask {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2002;
  > div {
    width: 8rem;
    height: 4.5rem;
    background: black;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    box-shadow: 0 0 0.3rem 0 black;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: calc(100% - 0.6rem);
      height: auto;
    }
    > div {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      color: @gold-color;
      @media only screen and (max-width: 500px),
        only screen and (max-device-width: 500px) {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
      }
      > img {
        width: 0.4rem;
        height: 0.4rem;
        object-fit: contain;
        position: absolute;
        left: 0.3rem;
        top: 0.3rem;
      }
      > span {
        font-size: 0.3rem;
        font-weight: bold;
      }
      > p {
        font-size: @small-size;
        margin-bottom: 0.2rem;
        text-align: center;
      }
      .btn {
        width: 1.2rem;
        height: 0.4rem;
        font-size: @normal-size;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px @gold-color solid;
        margin-top: 0.2rem;
        border-radius: 1rem;
        transition: 300ms;
        cursor: pointer;
      }
      .btn:hover {
        background: @gold-color;
        color: black;
        font-weight: bold;
      }
      > input {
        width: 50%;
        margin-top: 0.1rem;
        color: black;
        box-sizing: border-box;
        padding: 0.1rem;
        outline: none;
        border: 1px @gold-color solid;
        border-radius: 0.05rem;
        @media only screen and (max-width: 500px),
          only screen and (max-device-width: 500px) {
          width: calc(100% - 0.6rem);
        }
      }
      > div {
        width: 50%;
        margin-top: 0.1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0.1rem;
        border: 1px @gold-color solid;
        border-radius: 0.05rem;
        font-size: @small-size;
        @media only screen and (max-width: 500px),
          only screen and (max-device-width: 500px) {
          width: calc(100% - 0.6rem);
        }
        > input {
          outline: none;
          width: 50%;
        }
      }
    }
    .left {
      width: 40%;
      background: black;
      @media only screen and (max-width: 500px),
        only screen and (max-device-width: 500px) {
        margin-top: 0.5rem;
      }
    }
    .right {
      width: 60%;
      background: white;
      color: goldenrod;
      > span {
        color: black;
      }
      > p {
      }
    }
  }
}
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: @small-size;
  position: relative;
  > div {
    width: 100%;
    font-weight: bold;
  }
  > input {
    width: 80%;
    margin-top: 0.1rem;
    color: black;
    box-sizing: border-box;
    padding: 0.1rem;
    outline: none;
    border: 1px @gold-color solid;
    border-radius: 0.05rem;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: calc(100% - 0.6rem);
    }
  }
  > div {
    width: 80%;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0.1rem;
    border: 1px @gold-color solid;
    border-radius: 0.05rem;
    font-size: @small-size;
    background: white;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: calc(100% - 0.6rem);
    }
    > input {
      outline: none;
      width: 50%;
    }
  }
  .el-button {
    width: 80%;
    font-size: @normal-size;
  }
  .el-button + .el-button {
    margin: 0;
    margin-top: 0.2rem;
  }
  .line {
    text-align: center;
    height: 1px;
    background: #f1f1f1;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    position: relative;
    > span {
      position: absolute;
      padding: 0.1rem;
      background: white;
      left: 50%;
      transform: translate(-50%, -50%);
      font-weight: normal;
    }
  }
  > p {
    margin-top: 0.2rem;
    font-size: @normal-size;
    color: white;
  }
  > span {
    font-size: @small-size;
    color: white;
    margin-top: 0.1rem;
  }
  b {
    text-decoration: underline;
    cursor: pointer;
    font-weight: normal;
    color: white;
  }
  b:hover {
    text-decoration: none;
  }
}
</style>
